//  <h1>哈哈</h1>
// let ele =  <h1 className='box'>哈哈<i>你好</i></h1>;
// import React from 'react'
// import ReactDOM from 'react-dom'

class Element{
  constructor(type,prop,children){
    this.type = type;// h1 div  i  p ...
    this.prop = prop;// {className:'box',id:'b',...}
    this.children = children;
  }
  fn(str){
    //str :' fontSize'
    return str.replace(/[A-Z]/g,function(a){
      console.log(a)
      return '-' + a.toLowerCase();
    })
  }
  render(){
    // render 是负责把传进来的参数转成真实DON
    let ele = document.createElement(this.type);
    Object.keys(this.prop).forEach(item=>{
      // item:  className  id  src ...
      // ele.setAttribute(item,this.prop[item])
      switch (item) {
        case 'className':
          ele.setAttribute('class',this.prop[item])
          break;
        case 'htmlFor':
          ele.setAttribute('for',this.prop[item])
          break;
        case 'style':
          // style {color:'red',margin:'10px',fontSize:'20px'}
          let str = '';
          Object.keys(this.prop[item]).forEach(k=>{
            str += `${this.fn(k)}:${this.prop[item][k]};`
          })
          ele.setAttribute('style',str)
          break;  
        default:
          ele.setAttribute(item,this.prop[item])
          break;
      }
    })
    this.children.forEach(item=>{
      // item 是每一个儿子
      // item  有可能是 字符串 也有可能是一个元素（Element这个类的实例）
      item instanceof Element ? 
      ele.appendChild(item.render()) : // 把实例转成真实DOM  放到元素中
      ele.appendChild(document.createTextNode(item)) // 把字符串转成文本节点  放到元素中
    })
    return ele
  }
}

let React = {
  createElement(type,prop,...children){
    return new Element(type,prop,children)
  }
}
let ReactDOM = {
  render(ele,contanier){
    contanier.appendChild(ele.render())
  }
}


let ele = React.createElement('h1',{className:'box',style:{color:'red',margin:'10px',fontSize:'20px'}},'哈哈',React.createElement('i',{},'你好'))

ReactDOM.render(ele,document.getElementById('root'))